<template>
  <div class="wrapper">
    <!-- 轮播图 -->
    <div class="carousel-wrapper">
      <el-carousel height="460px">
        <el-carousel-item v-for="item in CarouselList" :key="item.carousel_id">
          <img :src="'http://101.132.181.9:3000/' + item.imgPath" alt="" />
        </el-carousel-item>
      </el-carousel>
    </div>

    <!-- 手机模块 -->
    <div class="mobile-wrapper">
      <div class="title">手机</div>
      <div class="mobile-box">
        <div class="imgs-left">
          <img
            src="http://101.132.181.9:3000/public/imgs/phone/phone.png"
            alt=""
          />
        </div>
        <div class="imgs-right">
          <div
            class="imgs-item"
            v-for="item in mobileList"
            :key="item.product_id"
          >
            <div class="imgs-box">
              <img
                :src="'http://101.132.181.9:3000/' + item.product_picture"
                alt=""
                @click="tiao(item.product_id)"
              />
            </div>

            <div class="imgs-zi">
              <h2>{{ item.product_name }}</h2>
              <h3>{{ item.product_title }}</h3>
              <p>
                <span>{{ item.product_selling_price }}元</span>
                <span
                  class="del"
                  v-show="item.product_price !== item.product_selling_price"
                  >{{ item.product_price }}元</span
                >
              </p>
            </div>
          </div>
          <div
            class="imgs-item2"
            @click="
              $router.push(`/goods?categoryID=${mobileList[0].category_id}`)
            "
          >
            浏览更多 》
          </div>
        </div>
      </div>
    </div>
    <!-- 家电 -->
    <div class="mobile-wrapper">
      <div class="title">
        家电
        <div class="title-item">
          <span ref="jd" @mouseover="jdd">热门</span>
          <span ref="ds" @mouseover="dsyy">电视影音</span>
        </div>
      </div>
      <div class="mobile-box">
        <div class="imgs-left">
          <div class="imgs-left-item1">
            <img
              src="http://101.132.181.9:3000/public/imgs/appliance/appliance-promo1.png"
              alt=""
            />
          </div>
          <div class="imgs-left-item1">
            <img
              src="http://101.132.181.9:3000/public/imgs/appliance/appliance-promo2.png"
              alt=""
            />
          </div>
        </div>
        <div class="imgs-right" v-if="show">
          <div
            class="imgs-item"
            v-for="item in HotProductList"
            :key="item.product_id"
          >
            <div class="imgs-box">
              <img
                :src="'http://101.132.181.9:3000/' + item.product_picture"
                @click="tiao(item.product_id)"
                alt=""
              />
            </div>

            <div class="imgs-zi">
              <h2>{{ item.product_name }}</h2>
              <h3>{{ item.product_title }}</h3>
              <p>
                <span>{{ item.product_selling_price }}元</span>
                <span
                  class="del"
                  v-show="item.product_price !== item.product_selling_price"
                  >{{ item.product_price }}元</span
                >
              </p>
            </div>
          </div>
          <div
            class="imgs-item2"
            @click="
              $router.push(`/goods?categoryID=${HotProductList[0].category_id}`)
            "
          >
            浏览更多 》
          </div>
        </div>
        <!-- 电视影音 -->
        <div class="imgs-right" v-if="as">
          <div class="imgs-item" v-for="item in omeappp" :key="item.product_id">
            <div class="imgs-box">
              <img
                :src="'http://101.132.181.9:3000/' + item.product_picture"
                @click="tiao(item.product_id)"
                alt=""
              />
            </div>

            <div class="imgs-zi">
              <h2>{{ item.product_name }}</h2>
              <h3>{{ item.product_title }}</h3>
              <p>
                <span>{{ item.product_selling_price }}元</span>
                <span
                  class="del"
                  v-show="item.product_price !== item.product_selling_price"
                  >{{ item.product_price }}元</span
                >
              </p>
            </div>
          </div>
          <div
            class="imgs-item2"
            @click="$router.push(`/goods?categoryID=${omeappp[0].category_id}`)"
          >
            浏览更多 》
          </div>
        </div>
      </div>
    </div>
    <!-- 配件 -->
    <div class="mobile-wrapper">
      <div class="title">
        配件
        <div class="title-item">
          <span ref="em" @mousemove="em" class="em">热门</span>
          <span ref="bht" @mousemove="bht" class="bht">保护套</span>
          <span ref="cdq" @mousemove="cdq" class="cdq">充电器</span>
        </div>
      </div>
      <div class="mobile-box">
        <div class="imgs-left">
          <div class="imgs-left-item1">
            <img
              src="http://101.132.181.9:3000/public/imgs/accessory/accessory-promo1.png"
              alt=""
            />
          </div>
          <div class="imgs-left-item1">
            <img
              src="http://101.132.181.9:3000/public/imgs/accessory/accessory-promo2.png"
              alt=""
            />
          </div>
        </div>
        <!-- 热门 -->
        <div class="imgs-right" v-if="showw">
          <div
            class="imgs-item"
            v-for="item in HotProductList1"
            :key="item.product_id"
          >
            <div class="imgs-box">
              <img
                :src="'http://101.132.181.9:3000/' + item.product_picture"
                @click="tiao(item.product_id)"
                alt=""
              />
            </div>

            <div class="imgs-zi">
              <h2>{{ item.product_name }}</h2>
              <h3>{{ item.product_title }}</h3>
              <p>
                <span>{{ item.product_selling_price }}元</span>
                <span
                  class="del"
                  v-show="item.product_price !== item.product_selling_price"
                  >{{ item.product_price }}元</span
                >
              </p>
            </div>
          </div>
          <div
            class="imgs-item2"
            @click="
              $router.push(
                `/goods?categoryID=${HotProductList1[0].category_id}`
              )
            "
          >
            浏览更多 》
          </div>
        </div>
        <div class="imgs-right" v-if="showww">
          <div
            class="imgs-item"
            v-for="item in accessoryy"
            :key="item.product_id"
          >
            <div class="imgs-box">
              <img
                :src="'http://101.132.181.9:3000/' + item.product_picture"
                @click="tiao(item.product_id)"
                alt=""
              />
            </div>

            <div class="imgs-zi">
              <h2>{{ item.product_name }}</h2>
              <h3>{{ item.product_title }}</h3>
              <p>
                <span>{{ item.product_selling_price }}元</span>
                <span
                  class="del"
                  v-show="item.product_price !== item.product_selling_price"
                  >{{ item.product_price }}元</span
                >
              </p>
            </div>
          </div>
          <div
            class="imgs-item2"
            @click="
              $router.push(`/goods?categoryID=${accessoryy[0].category_id}`)
            "
          >
            浏览更多 》
          </div>
        </div>
        <div class="imgs-right" v-if="showwww">
          <div
            class="imgs-item"
            v-for="item in accessoryyy"
            :key="item.product_id"
          >
            <div class="imgs-box">
              <img
                :src="'http://101.132.181.9:3000/' + item.product_picture"
                @click="tiao(item.product_id)"
                alt=""
              />
            </div>

            <div class="imgs-zi">
              <h2>{{ item.product_name }}</h2>
              <h3>{{ item.product_title }}</h3>
              <p>
                <span>{{ item.product_selling_price }}元</span>
                <span
                  class="del"
                  v-show="item.product_price !== item.product_selling_price"
                  >{{ item.product_price }}元</span
                >
              </p>
            </div>
          </div>
          <div
            class="imgs-item2"
            @click="
              $router.push(`/goods?categoryID=${accessoryyy[0].category_id}`)
            "
          >
            浏览更多 》
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  carousel, //轮播图的获取
  MobileList, //获取手机
  HotProduct, //获取家电
} from "@/api/home";

export default {
  name: "homelaybel",
  data() {
    return {
      show: true,
      as: false,
      showw: true,
      showww: false,
      showwww: false,

      // 电视影音
      omeappp: [],
      //配件
      accessoryy: [],
      accessoryyy: [],

      CarouselList: [], //轮播图库
      mobileList: [], //手机数据
      categoryName1: ["电视机", "空调", "洗衣机"],
      categoryName2: ["保护套", "保护膜", "充电器", "充电宝"],
      HotProductList: [], //家电数据
      HotProductList1: [], //家电数据
    };
  },
  created() {
    this.getCarouselList(); // 轮播图
    this.getMobileList(); //手机
    this.getHotProductList(); //家电 全部
    this.getHotProductList1(); //配件  全部

    this.peijiannn();
    this.peijiannnn();
    this.Homeappp();
  },
  methods: {
    em() {
      this.$refs.em.style = "color:#ff6700;border-bottom:2px solid #ff6700";
      this.$refs.cdq.style = "color:black;border:none";
      this.$refs.bht.style = "color:black;border:none";
      this.showw = true;
      this.showww = false;
      this.showwww = false;
    },
    bht() {
      this.$refs.bht.style = "color:#ff6700;border-bottom:2px solid #ff6700";
      this.$refs.em.style = "color:black;border:none";
      this.$refs.cdq.style = "color:black;border:none";
      this.showw = false;
      this.showww = true;
      this.showwww = false;
    },
    cdq() {
      this.$refs.cdq.style = "color:#ff6700;border-bottom:2px solid #ff6700";
      this.$refs.bht.style = "color:black;border:none";
      this.$refs.em.style = "color:black;border:none";
      this.showw = false;
      this.showww = false;
      this.showwww = true;
    },
    jdd() {
      this.$refs.jd.style = "color:#ff6700;border-bottom:2px solid #ff6700";
      this.$refs.ds.style = "color:black;border:none";
      this.show = true;
      this.as = false;
    },
    dsyy() {
      this.$refs.ds.style = "color:#ff6700;border-bottom:2px solid #ff6700";
      this.$refs.jd.style = "color:black;border:none";
      this.show = false;
      this.as = true;
    },
    /**
     * 跳转详情
     */
    tiao(type) {
      this.$router.push({
        path: "/goods/details", //跳转的路由
        query: {
          //跳转路由的参数
          type: type,
        },
      });
    },
    /**
     * 获取轮播图的数据
     */
    async getCarouselList() {
      const res = await carousel();
      console.log(res, "轮播图");
      if (res.data.code === "001") {
        this.CarouselList = res.data.carousel;
        console.log(this.CarouselList);
      }
    },

    async peijiannn() {
      let res = await MobileList({ categoryName: "保护套" });
      console.log(res, "配件111");
      this.accessoryy = res.data.Product;
    },
    async peijiannnn() {
      let res = await MobileList({ categoryName: "充电器" });
      console.log(res, "配件1");
      this.accessoryyy = res.data.Product;
    },
    async Homeappp() {
      let res = await MobileList({ categoryName: "电视机" });
      console.log(res, "配件3");
      this.omeappp = res.data.Product;
    },

    /**
     * 获取手机数据
     */
    async getMobileList() {
      const res = await MobileList({ categoryName: "手机" });
      console.log(res, "手机");
      if (res.data.code === "001") {
        this.mobileList = res.data.Product;
        console.log(res.data.Product);
      }
    },
    /**
     * 获取家电
     */
    async getHotProductList() {
      const res = await HotProduct({
        categoryName: this.categoryName1,
      });
      console.log(res, "电视机");
      if (res.data.code === "001") {
        this.HotProductList = res.data.Product;
        console.log(res.data.Product);
      }
    },
    /**
     * 获取配件
     */
    async getHotProductList1() {
      const res = await HotProduct({
        categoryName: this.categoryName2,
      });
      console.log(res, "电视机");
      if (res.data.code === "001") {
        this.HotProductList1 = res.data.Product;
        console.log(res.data.Product);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
* {
  font-size: 14px;
}
.wrapper {
  width: 100%;
  height: 100%;
  background: white;
  display: flex;
  flex-direction: column;

  align-items: center;
  .carousel-wrapper {
    width: 1225px;
    height: 460px;
    background: white;
    img {
      height: 100%;
    }
  }

  .mobile-wrapper {
    width: 100%;
    background: #f5f5f5;
    display: flex;
    flex-direction: column;
    align-items: center;
    .title {
      width: 1225px;
      height: 58px;
      float: left;
      font-size: 22px;
      font-weight: 200;
      line-height: 58px;
      color: #333;
      display: flex;
      justify-content: space-between;
      .title-item {
        span {
          margin-right: 50px;
          font-size: 16px !important;
          &:hover {
            color: #ff6700;
            border-bottom: 2px solid #ff6700;
          }
        }
      }
    }
    .mobile-box {
      width: 1225px;
      height: 615px;
      // background: red;
      display: flex;
      justify-content: space-between;
      .imgs-left {
        width: 234px;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        // background: green;
        img {
          height: 100%;
        }
        .imgs-left-item1 {
          width: 234px;
          height: 300px;
          &:hover.imgs-left-item1 {
            box-shadow: 0 15px 30px rgb(0 0 0 / 10%);
            transform: translate3d(0, -2px, 0);
          }
          img {
            width: 100%;
            height: 300px;
          }
        }
      }
      .imgs-right {
        flex: 1;
        display: flex;
        flex-wrap: wrap;
        .imgs-item2 {
          z-index: 1;
          float: left;
          width: 234px;
          height: 280px;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          padding: 10px 0;
          margin: 0 0 14.5px 13.7px;
          background-color: #fff;
          font-size: 18px;
          color: #333;
          position: relative;
          &:hover.imgs-item2 {
            box-shadow: 0 15px 30px rgb(0 0 0 / 10%);
            transform: translate3d(0, -2px, 0);
          }
        }

        .imgs-item {
          z-index: 1;
          float: left;
          width: 234px;
          height: 280px;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          padding: 10px 0;
          margin: 0 0 14.5px 13.7px;
          background-color: #fff;
          // -webkit-transition: all 0.2s linear;
          transition: all 0.2s linear;
          position: relative;
          &:hover.imgs-item {
            box-shadow: 0 15px 30px rgb(0 0 0 / 10%);
            transform: translate3d(0, -2px, 0);
          }
          .imgs-box {
            width: 160px;
            height: 160px;
            img {
              width: 160px;
              height: 160px;
            }
          }

          .imgs-zi {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            align-items: center;
            .h2 {
              font-size: 12px !important;
              color: #333;
            }
            h3 {
              margin: 5px 10px;
              height: 18px;
              font-size: 12px;
              color: #b0b0b0;
            }
            p {
              span {
                margin: 10px 10px 10px;
                font-size: 16px;
                text-align: center;
                color: #ff6700;
              }
              .del {
                margin-left: 0.5em;
                color: #b0b0b0;
                text-decoration: line-through;
              }
            }
          }
        }
      }
    }
  }
}
</style>